import styles from "../../index.module.less";
import { handlePostIssue } from "../../utils";
import { drawerFormState, refreshComponent } from "../../store";
import { userPowerMap } from "../../dict";
export default defineComponent({
  setup() {
    return () => (
      <>
        <div style="width: 100%">
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span={20}>
              <s-title>{$t("base.worldWall")}</s-title>
            </a-col>
            <a-col span={4} style="text-align: right">
              <s-button
                size="small"
                style="width: 100px"
                onClick={() => handlePostIssue()}
              >
                {$t("base.postTrends")}
              </s-button>
            </a-col>
          </a-row>
          {refreshComponent.value ? (
            <div class={styles.scroll}>
              {drawerFormState?.userDynamics?.length
                ? drawerFormState.userDynamics.map((dynamicItem: any) => {
                    return (
                      <a-row
                        class="mb8 s-drawer-extra-row pl16 pr16 border-box"
                        gutter={16}
                        style="border-bottom: 1px solid #909090;"
                      >
                        <a-row class="mb8 s-drawer-extra-row">
                          <a-col span={24} class="ml8">
                            <i>
                              {$t("base.power")}：
                              {selectDictLabel(userPowerMap, dynamicItem.auth)}
                            </i>
                          </a-col>
                        </a-row>
                        <a-row
                          class="mb8 s-drawer-extra-row"
                          gutter={5}
                          style="align-items: flex-start"
                        >
                          <div class={styles.Flex}>
                            <video-player v-model={dynamicItem.video} />
                            {dynamicItem?.picture?.map?.(
                              (url: string | undefined, index: number) => {
                                return (
                                  <a-col class={styles.col}>
                                    <a-image
                                      class={styles.img}
                                      src={url}
                                      onClick={() =>
                                        $preview(index, dynamicItem.picture)
                                      }
                                      preview={false}
                                    />
                                  </a-col>
                                );
                              }
                            )}
                          </div>

                          <a-col>
                            <pre>{dynamicItem.content}</pre>
                          </a-col>
                        </a-row>
                        <a-row class="mb16 ml8 s-drawer-extra-row">
                          <a-col span={24}>
                            <div>{dynamicItem.location}</div>
                            <div class={styles.dynamic_time}>
                              <i>
                                {dynamicItem.created_at
                                  ? getTimeByZone(dynamicItem.created_at)
                                  : null}
                              </i>
                              <a
                                class="ml8"
                                onClick={() => {
                                  drawerFormState.dynamicIds.push(
                                    dynamicItem.id
                                  );
                                  drawerFormState.dynamicIds = [
                                    ...new Set(drawerFormState.dynamicIds),
                                  ];
                                  drawerFormState.userDynamics =
                                    drawerFormState.userDynamics.filter(
                                      (item: any) => {
                                        if (item.id != dynamicItem.id) {
                                          return true;
                                        }
                                        return false;
                                      }
                                    );
                                  drawerFormState.images.length = 0;
                                }}
                              >
                                {$t("base.delete")}
                              </a>
                            </div>
                          </a-col>
                        </a-row>
                      </a-row>
                    );
                  })
                : null}
            </div>
          ) : null}
        </div>
      </>
    );
  },
});
